<template>
  <div class="msg-info">
    <chat-list
      :list="$store.state.msgList"
      @select="onSelected"
      @itemClick="expand=true"
      :style="chatListStyle"
    />
    <chat
      :height="1000"
      :style="chatStyle"
      :current="current"
      v-model="selectList"
      :user="user"
      :show-history="showHistory"
      @send="onSend"
      @back="onBack"
      @more="onMore"
      @delete="onRemove"
      @userInfo="onUserInfo"
      @history="onHistory"
    />
  </div>
</template>

<script>
import Chat from "@comp/chat/Chat";
import ChatList from "@comp/chat/ChatList";
export default {
  components: { Chat, ChatList },
  data() {
    return {
      expand: true,
      current: {name:'',id:''},
      showHistory: true,
      user: JSON.parse(window.sessionStorage.getItem("user")),
      selectList: [],
    };
  },
  computed: {
    chatListStyle() {
      if (!this.expand) {
        return {
          width: "50px",
          flex: "0 0 50px",
          justifyContent: "start",
        };
      } else {
        return {
          width: "100%",
        };
      }
    },
    chatStyle() {
      if (!this.expand) {
        return {
          width: "100%",
          justifyContent: "end",
        };
      } else {
        return {
          display: "none",
        };
      }
    },
  },
  methods: {
    onSend(msg, list) {
      console.log(msg, list);
    },
    onBack(e) {
      this.expand = true;
    },
    onMore(e) {
      console.log("more", e);
    },
    onRemove(row) {
      this.list.splice(
        this.list.findIndex((item) => item == row),
        1
      );
    },
    onUserInfo(id, isGroup, type) {
      console.log(id, isGroup, type);
    },
    onHistory(list) {
      this.$api.find('chat','msgs',{_mock:{
      'messages|2-20':[{
        id:'@id',
        value:'@ctitle',
        'source|1':['me','else'],
        type:'text',
        name:'@cname',
        date:'@datetime'
      }]
    }}).then(data=>{
      const arr = data.result.rows[0].messages
      if (arr.length>0){
        this.selectList=arr.concat(this.selectList)
      }else{
        this.showHistory=false
      }
    })
    },
    onSelected(item) {
      this.selectList = item.messages;
      this.current = {id:item.id,name:item.name}
      this.expand = false;
    },
  },
  mounted() {
    this.$api.find('chat','msgs',{_mock:{
      name:'@cname',
      'type|1':['user','group'],
      id:'@id',
      icon:'',
      'member|3-500':[{id:'@id',name:'@cname'}],
      'messages|2-20':[{
        id:'@id',
        value:'@ctitle',
        'source|1':['me','else'],
        type:'text',
        name:'@cname',
        date:'@datetime'
      }]
    }}).then(data=>{
      this.$store.commit('setMsgList',data.result.rows)
    })
  },
};
</script>

<style lang="less" scoped>
.msg-info {
  display: flex;
}
</style>
